<template>
    <div id="layout">
        <router-view></router-view>
        <footer>
            <div>
                <router-link active-class="active" to="/index">
                    <i class="icon-1"></i>
                    <p>首页</p>
                </router-link>
                <router-link exact-active-class="active" to="/classroom">
                    <i class="icon-2"></i>
                    <p>课堂</p>
                </router-link>
                <router-link exact-active-class="active" to="/shopping">
                    <i class="icon-3"></i>
                    <p>商城</p>
                </router-link>
                <router-link exact-active-class="active" to="/favorites">
                    <i class="icon-4"></i>
                    <p>收藏夹</p>
                </router-link>
                <router-link exact-active-class="active" to="/my">
                    <i class="icon-5"></i>
                    <p>我的</p>
                </router-link>
            </div>
        </footer>
    </div>
</template>

<script>
</script>

<style lang="less" scoped>
@import './common/less/varible.less';
#layout{
  font-family: @myfont;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 60px;
  background: #fdf8f8;
  border-top: 1px solid @borderColor;
  box-sizing: border-box;

  >div {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;

    a {
      flex-basis: 20%;
      flex-grow: 1;
      text-align: center;
      // 移除a标签在移动端的轻触高亮效果
      -webkit-tap-highlight-color: transparent;
      color: #333;
      .icon-1{
        background-image: url(./assets/img/home.png);
      }
      .icon-2{
        background-image: url(./assets/img/classroom.png);
      }
      .icon-3{
        background-image: url(./assets/img/shopping.png);
      }
      .icon-4{
        background-image: url(./assets/img/favorites.png);
      }
      .icon-5{
        background-image: url(./assets/img/my.png);
      }
      p{
        font-size: 15px;
      }
    }

    a.active {
      color: @fontColor;
      .icon-1{
        background-image: url(./assets/img/home-active.png);
      }
      .icon-2{
        background-image: url(./assets/img/classroom-active.png);
      }
      .icon-3{
        background-image: url(./assets/img/shopping-active.png);
      }
      .icon-4{
        background-image: url(./assets/img/favorites-active.png);
      }
      .icon-5{
        background-image: url(./assets/img/my-active.png);
      }
    }
  }
}

// 利用i标签做图标
[class^="icon"] {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-size: cover;
}


</style>